時間デカルト軸
タイムスケールは時刻と日付を表示するために使用されます。ティックを構築する際、スケールのサイズに基づいて最も快適な単位を自動的に計算します。
日付アダプター
タイム スケールには、日付ライブラリと対応するアダプターの両方が存在する必要があります。デフォルトでは、Chart.js には Moment.js のアダプターが含まれています。ご希望かもしれません瞬間を除外するそしてから選択してくださいその他の利用可能なアダプターその代わり。
データセット
入力データ
X 軸のデータ点は、次の方法で追加的に指定できます。t
またx
タイムスケールを使用する場合の属性。
data: [{
x: new Date(),
y: 1
}, {
t: new Date(),
y: 10
}]
日付形式
タイム スケールのデータを提供する場合、Chart.js は Moment.js が受け入れるすべての形式をサポートします。見るMoment.js ドキュメント詳細については。
構成オプション
時間スケールによって次のオプションが提供されます。によって提供されるオプションを設定することもできます。一般的なティック設定。
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
adapters.date |
object |
{} |
外部日付ライブラリのアダプターのオプション (アダプターがオプションを必要とするかサポートする場合) |
distribution |
string |
'linear' |
データがどのようにプロットされるか。もっと... |
bounds |
string |
'data' |
スケールの境界を決定します。もっと... |
ticks.source |
string |
'auto' |
ダニが生成される仕組み。もっと... |
time.displayFormats |
object |
さまざまな時間単位をどのように表示するかを設定します。もっと... | |
time.isoWeekday |
boolean |
false |
true で単位が「週」に設定されている場合、週の最初の日は月曜日になります。そうでなければ日曜日になります。 |
time.parser |
string|function |
日付のカスタムパーサー。もっと... | |
time.round |
string |
false |
定義されている場合、日付はこの単位の先頭に丸められます。見る時間単位許可される単位については以下を参照してください。 |
time.tooltipFormat |
string |
ツールチップに使用する Moment.js 形式の文字列。 | |
time.unit |
string |
false |
定義されている場合、ユニットは強制的に特定のタイプになります。見る時間単位詳細については、以下のセクションを参照してください。 |
time.stepSize |
number |
1 |
グリッド線間の単位数。 |
time.minUnit |
string |
'millisecond' |
時間単位に使用される最小の表示形式。 |
時間単位
次の時間測定がサポートされています。名前は文字列として渡すことができます。time.unit
特定のユニットを強制するための設定オプション。
'millisecond'
'second'
'minute'
'hour'
'day'
'week'
'month'
'quarter'
'year'
たとえば、常に月ごとの単位を表示する時間スケールを持つグラフを作成するには、次の構成を使用できます。
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month'
}
}]
}
}
});
表示形式
次の表示形式は、さまざまな時間単位を軸の目盛りの文字列に形成する方法を構成するために使用されます。見るモーメント.js許容されるフォーマット文字列については。
名前 | デフォルト | 例 |
---|---|---|
millisecond |
'h:mm:ss.SSS a' |
'11:20:01.123 AM' |
second |
'h:mm:ss a' |
'11:20:01 AM' |
minute |
'h:mm a' |
'11:20 AM' |
hour |
'hA' |
'11AM' |
day |
'MMM D' |
'Sep 4' |
week |
'll' |
'Sep 4 2015' |
month |
料金1e8b5-9e43-425e-9f85-d1da34e2d029 | 'Sep 2015' |
quarter |
'[Q]Q - YYYY' |
bc4be469-ad13-47ef-90b1-c3530fcf2709 |
year |
'YYYY' |
'2015' |
たとえば、quarter
月と年を表示するユニットを使用するには、次の構成がチャート コンストラクターに渡されます。
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
quarter: 'MMM YYYY'
}
}
}]
}
}
});
スケール分布
のdistribution
プロパティはスケールに沿ったデータ分布を制御します。
'linear'
: データは時間に従って分散されます (距離は異なる場合があります)'series'
: データは互いに同じ距離に分散されています。
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'series'
}]
}
}
});
スケール境界
のbounds
プロパティはスケール境界戦略を制御します (スケール境界戦略はバイパスされます)。min
/max
時間オプション)。
'data'
: データが完全に表示され、外側のラベルが削除されていることを確認します。'ticks'
: 目盛りが完全に表示されていることを確認し、外側のデータは切り捨てられます。
ティックソース
のticks.source
プロパティはティックの生成を制御します。
'auto'
: スケール サイズと時間オプションに基づいて「最適な」ティックを生成します'data'
: データからティックを生成します (データからのラベルを含む){t|x|y}
オブジェクト)'labels'
: ユーザーが指定した値からティックを生成しますlabels
それだけ
パーサー
このプロパティが文字列として定義されている場合、Moment.js が日付を解析するために使用するカスタム形式として解釈されます。
これが関数の場合、適切なデータ値を指定して Moment.js オブジェクトを返す必要があります。